import React, { useEffect } from 'react';
import ProfileList from '@compb/ProfileList';
import './index.css';
import axios from 'axios';
import { logout } from '@api/login';
import { useHistory } from 'react-router-dom';
const data = [
    {
        header: '',
        list: [
            { title: '消息中心' },
            { title: '云贝中心' }
        ]
    },
    {
        header: '音乐服务',
        list: [
            { title: '演出' },
            { title: '商城' },
            { title: '口袋彩铃' },
            { title: '游戏专区' }
        ]
    },
    {
        header: '其它',
        list: [
            { title: '设置' },
            { title: '夜间模式' },
            { title: '定时关闭' },
            { title: '个性装扮' },
            { title: '边听边存' },
            { title: '在线听歌免流量' },
            { title: '添加Siri捷径' },
            { title: '音乐黑名单' },
            { title: '青少年模式' },
            { title: '音乐名单' }
        ]
    },
    {
        header: '',
        list: [
            { title: '我的客服' },
            { title: '我的订单' },
            { title: '优惠券' },
            { title: '分享网易云音乐' },
            { title: '关于' }
        ]
    }
]
const Profile = ({ user }) => {
    let route = useHistory();
    useEffect(() => {
        
    }, []);
    function handleLogout() {
        axios.get(logout()).then(res => {
            if (res.data.code && res.data.code === 200) {
                localStorage.clear();
                route.push("/");
            }
        });
    }
    return (
        <div className="profile-container page-container">
            <div className="profile-header">
                <img src={user ? user.avatarUrl : ''} />
                <span>{user ? user.nickname : '立即登录'}</span>
            </div>
            <div className="profile-body">
                {
                    data && data.length > 0 ? data.map((e, i) =>(
                        <ProfileList key={i} data={e}/>
                    )): (<></>)
                }
                <div className="logout-btn" onClick={() => handleLogout()}>退出登录</div>
            </div>
        </div>
    )
}

export default Profile;